 <div class='row' id='content-wrapper'>
            <div class='col-xs-12 wigetdrapdrop'>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-comments'></i>
                      <span>Chats</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li>Components</li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>Chats</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='alert alert-info alert-dismissable'>
                <a class='close' data-dismiss='alert' href='#'>&times;</a>
                Chats can be placed in various containers. For example one below and one fixed on browser bottom.
              </div>
              <div class='row'>
                <div class='chat chat-fixed'>
                  <div class='col-sm-12'>
                    <div class='box box-collapsed'>
                      <div class='box-header box-header-small contrast-background'>
                        <div class='title'>
                          <i class='icon-comments-alt'></i>
                          Chat
                        </div>
                        <div class='actions'>
                          <a class="btn box-remove btn-xs btn-link" href="#"><i class='icon-remove'></i>
                          </a>
                          
                          <a class="btn box-collapse btn-xs btn-link" href="#"><i></i>
                          </a>
                        </div>
                      </div>
                      <div class='box-content box-no-padding'>
                        <div class='scrollable' data-scrollable-height='300' data-scrollable-start='bottom'>
                          <ul class='list-unstyled list-hover list-striped'>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:42:35 +0200'>September 15, 2013 - 17:42</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Quam aut assumenda perspiciatis et ab in vero blanditiis qui et reiciendis
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:41:35 +0200'>September 15, 2013 - 17:41</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Natus tempora est et aut expedita voluptatem voluptas
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:40:35 +0200'>September 15, 2013 - 17:40</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Dolores sunt distinctio qui corporis
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:39:35 +0200'>September 15, 2013 - 17:39</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Occaecati voluptas adipisci itaque minima est labore explicabo natus aut consectetur eaque voluptatem laboriosam
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:38:35 +0200'>September 15, 2013 - 17:38</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Aliquam quibusdam et quia
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:37:35 +0200'>September 15, 2013 - 17:37</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Et aut quia et magnam iusto consequatur enim non numquam eaque
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Samuel</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:36:35 +0200'>September 15, 2013 - 17:36</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Vel saepe dolores in totam
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:35:35 +0200'>September 15, 2013 - 17:35</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Eos exercitationem aut est enim eum consequatur iste odio tenetur ipsum minima et
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Samuel</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:34:35 +0200'>September 15, 2013 - 17:34</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Enim non expedita veritatis ut quam deserunt et odit eius corporis quos quae
                              </div>
                            </li>
                            <li class='message'>
                              <div class='avatar'>
                                <img alt='Avatar' height='23' src='assets/images/avatar.jpg' width='23'>
                              </div>
                              <div class='name-and-time'>
                                <div class='name pull-left'>
                                  <small>
                                    <a class="text-contrast" href="#">Dwayne</a>
                                  </small>
                                </div>
                                <div class='time pull-right'>
                                  <small class='date pull-right text-muted'>
                                    <span class='timeago fade has-tooltip' data-placement='top' title='2013-09-15 17:33:35 +0200'>September 15, 2013 - 17:33</span>
                                    <i class='icon-time'></i>
                                  </small>
                                </div>
                              </div>
                              <div class='body'>
                                Aut ducimus et quis eius
                              </div>
                            </li>
                          </ul>
                        </div>
                                  <form class="new-message" method="post" action="#" accept-charset="UTF-8"><input name="authenticity_token" type="hidden" /><input class='form-control' id='message_body' name='message[body]' placeholder='Type your message here...' type='text'>
                        <button class='btn btn-success' type='submit'>
                          <i class='icon-plus'></i>
                        </button>
                        </form>
              
                      </div>
                    </div>
                  </div>
                </div>
              </div>
		<div class='row'>
			<div class='col-sm-12'>
				<div class='box'>
					<div class='row'>
						<div class='chat'>
							<div class='col-sm-12'>
								<div class='box'>
									<div class='box-content box-no-padding'>
										<div class='scrollable' data-scrollable-height='300'
											data-scrollable-start='bottom'>
											<ul class='list-unstyled list-hover list-striped'>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:42:35 +0200'>September 15,
																	2013 - 17:42</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Error delectus voluptatem assumenda
													</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Jackie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:41:35 +0200'>September 15,
																	2013 - 17:41</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Quisquam quis soluta autem atque
														voluptatem tempora</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Jackie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:40:35 +0200'>September 15,
																	2013 - 17:40</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Incidunt vel aut repellat et
														consequatur qui</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Jackie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:39:35 +0200'>September 15,
																	2013 - 17:39</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Qui animi ad dolorem aut eaque aut
														assumenda necessitatibus</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:38:35 +0200'>September 15,
																	2013 - 17:38</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Enim aut cumque blanditiis</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:37:35 +0200'>September 15,
																	2013 - 17:37</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Qui at et possimus aut nobis labore
														reiciendis voluptas aut voluptates voluptates</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:36:35 +0200'>September 15,
																	2013 - 17:36</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Aut amet illo officiis iste
														dignissimos</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:35:35 +0200'>September 15,
																	2013 - 17:35</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Blanditiis dolores et itaque libero
														voluptatem</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Jackie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:34:35 +0200'>September 15,
																	2013 - 17:34</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Odio ut ex numquam tempora
														voluptatem sint dicta hic odio nemo voluptatum</div>
												</li>
												<li class='message'>
													<div class='avatar'>
														<img alt='Avatar' height='23'
															src='assets/images/avatar.jpg' width='23'>
													</div>
													<div class='name-and-time'>
														<div class='name pull-left'>
															<small> <a class="text-contrast" href="#">Maggie</a>
															</small>
														</div>
														<div class='time pull-right'>
															<small class='date pull-right text-muted'> <span
																class='timeago fade has-tooltip' data-placement='top'
																title='2013-09-15 17:33:35 +0200'>September 15,
																	2013 - 17:33</span> <i class='icon-time'></i>
															</small>
														</div>
													</div>
													<div class='body'>Sit odio aut eum asperiores cum sed
														assumenda aliquam beatae</div>
												</li>
											</ul>
										</div>
										<form class="new-message" method="post" action="#"
											accept-charset="UTF-8">
											<input name="authenticity_token" type="hidden" /><input
												class='form-control' id='message_body' name='message[body]'
												placeholder='Type your message here...' type='text'>
											<button class='btn btn-success' type='submit'>
												<i class='icon-plus'></i>
											</button>
										</form>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				                  </div>
                  </div>
			</div>
			<!-- end form -->


			<?php echo $this->action('index','magazinepublish','administrator');?>



		</div>
		<!-- end content-wrapper  -->
